<template>
  <section>
    <el-row>
      <el-button type="primary" size="mini" @click="addCustomerBtn">绑定新成员</el-button>
    </el-row>
    <el-table :data="customers">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="性别" prop="gender" :formatter="getGender"/>
      <el-table-column label="手机" prop="phone"/>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editCustomerBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="unbindingBtn(scope.row)">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="currCustomer.id?'编辑成员':'添加成员'" :visible.sync="showDialog" v-if="showDialog" width="60%">
      <div v-if="!currCustomer.id">
        <el-button size="mini" type="text" @click="loadingCustomer = !loadingCustomer"
                   style="margin-left:80px">
                   <!--:style="{ 'float': loadingCustomer ? 'right' : 'left' ,'margin-top':'10px'}">-->
          {{loadingCustomer?'<<< 收起':'导入成员 >>>'}}
        </el-button>
      </div>
      <create-customer v-if="!loadingCustomer" tag="member" :customer="currCustomer" v-on:confirm="confirmDialogBtn"></create-customer>
      <div v-if="loadingCustomer">
        <load-customer :member="member" v-on:confirm="confirmLoadDialogBtn"></load-customer>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import VCode from '@/common/VCode'
  import loadCustomer from '../customer'
  import createCustomer from '../customer/createCustomerDialog'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "customersInMember",
    components:{createCustomer,loadCustomer},
    props:['member'],
    data() {
      return {
        customers:null,
        showDialog:false,
        loadingCustomer:false,
        currCustomer:null
      }
    },
    created(){
      console.log(this.member)
      this.getMember(this.member.id)
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getMember(mid){
        this.fetch({name:"getMember",data:{mid}})
          .then(res=>{
            console.log(res)
            this.customers=res.customers
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGender(a,b,c,d){
        if(c === 1){
          return '男'
        }else if (c === 2){
          return '女'
        }else {
          return '暂未设置'
        }
      },
      addCustomerBtn(){
        this.currCustomer={}
        this.showDialog=true
      },
      editCustomerBtn(row){
        this.currCustomer=row
        this.showDialog=true
      },
      confirmDialogBtn(e){
        console.log(e)
        let tmp={}
        for(let key in e){
          if(e[key] !== ''){
            tmp[key]=e[key]
          }
        }
        // this.createCustomerInMember(tmp)
      },

      updateCustomer(row){
        console.log(row)
        this.fetch({name:"updateCustomer",data:{...row},method:'post'})
          .then(res=>{
            this.$message({type:'success',message:'更新成功'})
            this.getMember(this.member.id)
            this.showDialog = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createCustomerInMember(e){
        this.fetch({name:"createCustomerInMember",data:{...e,memberId:this.member.id}})
          .then(res=>{
            //创建成功，关掉对话框
            this.$message({type:'sucess',message:'创建成功'})
            this.getMember(this.member.id)
            this.showDialog = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmLoadDialogBtn(e){
        console.log(e)
        //发送验证码
        if(VCode.judgeEmail(e.phone)){
          console.log('对啦')
          // this.showVCode(e)
          if(e.id){
            this.sendVCByBindingCustomer(e,true)
          }else {
            this.sendVCode(e)//发送验证码
          }
        }else {
          console.log('错啦')
        }
      },
      sendVCByBindingCustomer(customer,bind){
        this.fetch({name:"sendVCByBindingCustomer",data:{phone:customer.phone,customerId:customer.id}})
          .then(res=>{
            console.log('获取验证码——————————',res)
            this.showVCode(customer,bind)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      sendVCode(customer){
        this.fetch({name:"phoneVCode",data:{phone:customer.phone}})
          .then(res=>{
            console.log('验证码已发送')
            this.showVCode(customer)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      showVCode(customer,bind){
        this.$prompt('请输入验证码', '已发送', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          console.log(value)//判断验证码
          //去绑定吧
          let tmp={memberId:this.member.id,phone:customer.phone,vcode:value}
          console.log(tmp)
          if(!bind){
            this.unbindingCustomerByAdmin(tmp)
            return
          }
          this.bindCustomerInMember(customer,tmp)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      bindCustomerInMember(customer,data){
        this.fetch({name:"bindCustomerInMember",data})
          .then(res=>{
            console.log('绑定成功——————',res)
            Vue.set(customer,'load',true)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      unbindingBtn(row){
        this.$confirm('确认解绑？')
          .then(()=> {
            this.sendVCByBindingCustomer(row,false)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解绑'
            })
          })
      },
      unbindingCustomerByAdmin(data){
        this.fetch({name:"unbindingCustomerByAdmin",data})
          .then(res=>{
            console.log('解绑成功——————',res)
            this.getMember(this.member.id)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
